<!DOCTYPE html>
<title>Test removing keywords from controlsList shows buttons</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../../media-resources/media-controls.js"></script>
<video controlslist="nodownload nofullscreen noplaybackrate" id="disabled-controls" width="500px"></video>
<script>
async_test(t => {
  var v = document.getElementById('disabled-controls');

  v.addEventListener('canplaythrough', t.step_func(e => {
    assert_false(isDownloadsButtonEnabled(v));
    assert_false(isFullscreenButtonEnabled(v));
    assert_false(isPlaybackSpeedButtonEnabled(v));

    v.controlsList.remove('nodownload');

    runAfterLayoutAndPaint(t.step_func(() => {
      assert_true(isDownloadsButtonEnabled(v));
      assert_false(isFullscreenButtonEnabled(v));
      assert_false(isPlaybackSpeedButtonEnabled(v));

      v.controlsList.remove('nofullscreen');

      runAfterLayoutAndPaint(t.step_func(() => {
        assert_true(isDownloadsButtonEnabled(v));
        assert_true(isFullscreenButtonEnabled(v));
        assert_false(isPlaybackSpeedButtonEnabled(v));

        v.controlsList.remove('noplaybackrate');

        runAfterLayoutAndPaint(t.step_func_done(() => {
          assert_true(isFullscreenButtonEnabled(v));
          assert_true(isDownloadsButtonEnabled(v));
          assert_true(isPlaybackSpeedButtonEnabled(v));
        }));
      }));
    }));
  }));

  v.src = '../resources/test.ogv';
}, 'Test enabling controls on the video element with them enabled.');
</script>

